<template>
    <div class="dashboard-wrapper">
        <div class="dashboard-container">
            <!-- 搜索区域 -->
            <div class="search-section">
                <el-card class="search-card" shadow="never">
                    <el-form class="search-form">
                        <el-row :gutter="20" align="middle">
                            <el-col :lg="10" :md="12" :sm="24">
                                <el-form-item label="时间范围" class="search-item">
                                    <el-date-picker
                                        v-model="searchParams.dates"
                                        value-format="YYYY-MM-DD"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        size="default"
                                        style="width: 100%">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="6" :md="12" :sm="24">
                                <el-form-item class="search-actions">
                                    <el-button
                                        type="primary"
                                        icon="Search"
                                        size="default"
                                        @click="handleSearch"
                                        class="search-btn">
                                        查询数据
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
            </div>
            <!-- 统计卡片区域 -->
            <div class="stats-section">
                <el-row :gutter="24" class="stats-row">
                    <el-col :xs="24" :sm="12" :lg="6">
                        <div class="stat-card stat-card-primary">
                            <div class="stat-icon">
                                <el-icon size="24"><Money /></el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-title">合同总金额</div>
                                <div class="stat-value">¥{{ (state.tongji.total_amount.total_money || 0).toLocaleString() }}</div>
                                <div class="stat-badge">{{ state.tongji.total_amount.count || 0 }} 个合同</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6">
                        <div class="stat-card stat-card-success">
                            <div class="stat-icon">
                                <el-icon size="24"><Wallet /></el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-title">项目总计到款</div>
                                <div class="stat-value">¥{{ (state.tongji.total_income.money || 0).toLocaleString() }}</div>
                                <div class="stat-badge">{{ state.tongji.total_income.count || 0 }} 个项目</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6">
                        <div class="stat-card stat-card-warning">
                            <div class="stat-icon">
                                <el-icon size="24"><TrendCharts /></el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-title">渠道实际总收入</div>
                                <div class="stat-value">¥{{ (state.tongji.channel.income || 0).toLocaleString() }}</div>
                                <div class="stat-badge">{{ state.tongji.channel.count || 0 }} 个渠道</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6">
                        <div class="stat-card stat-card-info">
                            <div class="stat-icon">
                                <el-icon size="24"><Tools /></el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-title">维护总收入</div>
                                <div class="stat-value">¥{{ (state.tongji.maint.money || 0).toLocaleString() }}</div>
                                <div class="stat-badge">{{ state.tongji.maint.count || 0 }} 个项目</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="24" class="stats-row">
                    <el-col :xs="24" :sm="12" :lg="6">
                        <div class="stat-card stat-card-danger">
                            <div class="stat-icon">
                                <el-icon size="24"><ShoppingCart /></el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-title">淘宝刷单支出</div>
                                <div class="stat-value">¥{{ (state.tongji.taobao.total_money || 0).toLocaleString() }}</div>
                                <div class="stat-badge">{{ state.tongji.taobao.count || 0 }} 笔订单</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6">
                        <div class="stat-card stat-card-secondary">
                            <div class="stat-icon">
                                <el-icon size="24"><Coin /></el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-title">其他总支出</div>
                                <div class="stat-value">¥{{ (state.tongji.other.money || 0).toLocaleString() }}</div>
                                <div class="stat-badge">{{ state.tongji.other.count || 0 }} 笔支出</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6">
                        <div class="stat-card stat-card-purple">
                            <div class="stat-icon">
                                <el-icon size="24"><User /></el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-title">客户总数量</div>
                                <div class="stat-value">{{ state.tongji.custom_nums || 0 }}</div>
                                <div class="stat-badge">活跃客户</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6">
                        <div class="stat-card stat-card-cyan">
                            <div class="stat-icon">
                                <el-icon size="24"><Folder /></el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-title">项目总数量</div>
                                <div class="stat-value">{{ state.tongji.project_nums || 0 }}</div>
                                <div class="stat-badge">进行中项目</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>


            <!-- 图表分析区域 -->
            <div class="charts-section">
                <el-card class="charts-container" shadow="never">
                    <div class="charts-header">
                        <h3 class="section-title">数据分析</h3>
                        <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="custom-tabs">
                            <el-tab-pane label="项目统计" name="project">
                                <template #label>
                                    <span class="tab-label">
                                        <el-icon><TrendCharts /></el-icon>
                                        项目统计
                                    </span>
                                </template>
                            </el-tab-pane>
                            <el-tab-pane label="支出统计" name="expense">
                                <template #label>
                                    <span class="tab-label">
                                        <el-icon><Coin /></el-icon>
                                        支出统计
                                    </span>
                                </template>
                            </el-tab-pane>
                            <el-tab-pane label="渠道统计" name="channel">
                                <template #label>
                                    <span class="tab-label">
                                        <el-icon><DataAnalysis /></el-icon>
                                        渠道统计
                                    </span>
                                </template>
                            </el-tab-pane>
                        </el-tabs>
                    </div>

                    <el-row :gutter="24" class="charts-content">
                        <el-col :xs="24" :sm="24" :md="24" :lg="16">
                            <div class="chart-panel">
                                <div class="chart-header">
                                    <h4 class="chart-title">
                                        <span v-if="activeTab === 'project'">项目统计图表</span>
                                        <span v-else-if="activeTab === 'expense'">支出统计图表</span>
                                        <span v-else-if="activeTab === 'channel'">渠道统计图表</span>
                                    </h4>
                                    <div class="chart-controls">
                                        <el-radio-group v-model="searchParams.year" @change="renderChart" size="small">
                                            <el-radio-button label="2024">2024年</el-radio-button>
                                            <el-radio-button label="2025">2025年</el-radio-button>
                                        </el-radio-group>
                                    </div>
                                </div>
                                <div class="chart-container">
                                    <div ref="chartDom" class="chart-canvas"></div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="8">
                            <div class="report-panel">
                                <div class="report-header">
                                    <h4 class="report-title">
                                        <span v-if="activeTab === 'project'">项目年度报告</span>
                                        <span v-else-if="activeTab === 'expense'">支出年度报告</span>
                                        <span v-else-if="activeTab === 'channel'">渠道年度报告</span>
                                    </h4>
                                </div>
                                <div class="report-content">
                                    <el-table
                                        :data="state.year"
                                        class="report-table"
                                        stripe
                                        :show-header="true">
                                        <el-table-column
                                            prop="year"
                                            label="年份"
                                            width="80"
                                            align="center">
                                        </el-table-column>
                                        <el-table-column
                                            prop="total"
                                            label="金额"
                                            align="right">
                                            <template #default="scope">
                                                <span class="amount-text">¥{{ scope.row.total?.toLocaleString() || '0' }}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {useTemplateRefsList} from '@vueuse/core'
import * as echarts from 'echarts'
import {onMounted, nextTick, reactive, onActivated, onBeforeMount, watch, ref} from 'vue'
import {useNavTabs} from '/@/stores/navTabs'
import {index, projectYearChart, otherYearChart, channelYearChart, url} from "/@/api/backend/dashboard";
import createAxios from "/@/utils/axios";
import {
    Money,
    Wallet,
    TrendCharts,
    Tools,
    ShoppingCart,
    Coin,
    User,
    Folder,
    DataAnalysis,
    Search
} from '@element-plus/icons-vue'

const navTabs = useNavTabs()

const state: {
    projectCharts: any[]
    otherCharts: any[]
    channelCharts: any[]
    year: any[]
    remark: string
    workingTimeFormat: string,
    tongji: Object,
    pauseWork: boolean,
    activeName: string,
} = reactive({
    projectCharts: [],
    otherCharts: [],
    channelCharts: [],
    year: [],
    remark: 'dashboard.Loading',
    workingTimeFormat: '',
    pauseWork: false,
    tongji: {
        taobao: {
            total_money: 0.00,
            count: 0
        },
        channel: {
            income: 0.00,
            count: 0
        },
        other: {
            money: 0.00,
            count: 0
        },
        maint: {
            money: 0.00,
            count: 0
        },
        total_amount: {
            total_money: 0.00,
            count: 0
        },
        total_income: {
            money: 0.00,
            count: 0
        },
        custom_nums: 0,
        project_nums: 0
    },
    activeName: 'first'
})

const currentYear = new Date().getFullYear();

// 设置日期默认值：从今年1月1日到今天
const today = new Date();
const startOfYear = new Date(currentYear, 0, 1); // 今年的1月1日
const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

const searchParams = ref({
    dates: [formatDate(startOfYear), formatDate(today)],
    year: currentYear,
    other: currentYear,
    channel: currentYear
});

const activeTab = ref('project');
const chartDom = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const handleTabClick = (tab: { name: string }) => {
    activeTab.value = tab.name;
    renderChart();
};

const renderChart = () => {
    nextTick(() => {
        if (chartDom.value) {
            if (!chartInstance) {
                chartInstance = echarts.init(chartDom.value);
            }
            let option: echarts.EChartsOption = {};
            if (activeTab.value === 'project') {
                getYearChart().then((res) => {
                    let dataAxis = res.data.month.map(d => d.month)
                    let data = res.data.month.map(d => d.total)
                    let option = getOption(dataAxis,data);
                    state.year = res.data.year
                    chartInstance.setOption(option);
                })
            }else if(activeTab.value === 'expense'){
                getOtherChart().then((res) => {
                    let dataAxis = res.data.month.map(d => d.month)
                    let data = res.data.month.map(d => d.total)
                    let option = getOption(dataAxis,data);
                    state.year = res.data.year
                    chartInstance.setOption(option);
                })
            }else if(activeTab.value === 'channel'){
                getChannelChart().then((res) => {
                    let dataAxis = res.data.month.map(d => d.month)
                    let data = res.data.month.map(d => d.total)
                    let option = getOption(dataAxis,data);
                    state.year = res.data.year
                    chartInstance.setOption(option);
                })
            }
        }
    });
};



const getOption = (dataAxis,data)=>{

    return  {
        tooltip: {},
        xAxis: { data: dataAxis },
        yAxis: {
            axisLine: {
                show: true,
            },
            axisTick: {
                show: true,
            },
            axisLabel: {
                color: '#999',
            },
        },
        series: [{
            name: '项目数据',
            type: 'bar',
            data: data,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'},
                ]),
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#2378f7'},
                        {offset: 0.7, color: '#2378f7'},
                        {offset: 1, color: '#83bff6'},
                    ]),
                },
            },
        }]
    };
}

const handleSearch = async () => {
    index(searchParams.value.dates).then((res) => {
        state.remark = res.data.remark
        state.tongji = res.data.tongji
    })
}


const getYearChart = async () => {
    return createAxios({
        url: url + 'getProjectYearChart',
        method: 'post',
        data: {year:searchParams.value.year}
    })
}


const getChannelChart = async () => {
    return createAxios({
        url: url + 'getChannelYearChart',
        method: 'post',
        data: {year:searchParams.value.year}
    })
}


const getOtherChart = async () => {
    return createAxios({
        url: url + 'getOtherYearChart',
        method: 'post',
        data: {year:searchParams.value.year}
    })
}

const initUserGrowthChart = () => {
    // 初始化用户增长图表
}

const echartsResize = () => {
    nextTick(() => {
        for (const key in state.projectCharts) {
            state.projectCharts[key].resize()
        }
    })
}

onMounted(() => {
    handleSearch()
    initUserGrowthChart()
    renderChart();
    window.addEventListener('resize', echartsResize)
})

onBeforeMount(() => {
    for (const key in state.projectCharts) {
        state.projectCharts[key].dispose()
    }
    window.removeEventListener('resize', echartsResize)
})

onActivated(() => {
    echartsResize()
})
watch(
    () => navTabs.state.tabFullScreen,
    () => {
        echartsResize()
    }
)
</script>

<style scoped lang="scss">
// 全局变量
:root {
    --dashboard-bg: #f5f7fa;
    --card-bg: #ffffff;
    --primary-color: #409eff;
    --success-color: #67c23a;
    --warning-color: #e6a23c;
    --danger-color: #f56c6c;
    --info-color: #909399;
    --text-primary: #303133;
    --text-regular: #606266;
    --text-secondary: #909399;
    --border-light: #ebeef5;
    --shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    --border-radius: 8px;
    --border-radius-large: 12px;
}

.dashboard-wrapper {
    min-height: 100vh;
    padding: 20px;

    .dashboard-container {
        max-width: 1400px;
        margin: 0 auto;

        // 搜索区域
        .search-section {
            margin-bottom: 24px;

            .search-card {
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(10px);
                border: none;
                border-radius: var(--border-radius-large);
                box-shadow: var(--shadow-light);

                :deep(.el-card__body) {
                    padding: 20px 24px;
                }

                .search-form {
                    .search-item {
                        :deep(.el-form-item__label) {
                            font-weight: 500;
                            color: var(--text-primary);
                        }
                    }

                    .search-actions {
                        display: flex;
                        align-items: flex-end;

                        .search-btn {
                            padding: 10px 24px;
                            border-radius: var(--border-radius);
                            font-weight: 500;
                            box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
                            transition: all 0.3s ease;

                            &:hover {
                                transform: translateY(-2px);
                                box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
                            }
                        }
                    }
                }
            }
        }

        // 统计卡片区域
        .stats-section {
            margin-bottom: 40px;
            padding: 0 8px;

            .stats-row {
                margin-bottom: 24px;
                
                .stat-card {
                    background: var(--card-bg);
                    border-radius: 16px;
                    padding: 28px 24px;
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
                    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
                    position: relative;
                    overflow: hidden;
                    margin-bottom: 20px;
                    border: 2px solid transparent;
                    background-clip: padding-box;
                    
                    // 渐变边框效果
                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: linear-gradient(135deg, var(--card-color), var(--card-color-light));
                        border-radius: 16px;
                        padding: 2px;
                        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                        mask-composite: exclude;
                        -webkit-mask-composite: xor;
                        opacity: 0;
                        transition: opacity 0.3s ease;
                    }
                    
                    // 背景装饰
                    &::after {
                        content: '';
                        position: absolute;
                        top: -50%;
                        right: -50%;
                        width: 100px;
                        height: 100px;
                        background: radial-gradient(circle, rgba(var(--card-color-rgb), 0.05) 0%, transparent 70%);
                        border-radius: 50%;
                        transition: all 0.4s ease;
                    }

                    &:hover {
                        transform: translateY(-8px) scale(1.02);
                        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(var(--card-color-rgb), 0.2);
                        
                        &::before {
                            opacity: 1;
                        }
                        
                        &::after {
                            transform: scale(1.5);
                            opacity: 0.8;
                        }
                        
                        .stat-icon {
                            transform: scale(1.1) rotate(5deg);
                            box-shadow: 0 8px 25px rgba(var(--card-color-rgb), 0.4);
                        }
                        
                        .stat-value {
                            color: var(--card-color);
                        }
                    }

                    .stat-icon {
                        width: 56px;
                        height: 56px;
                        border-radius: 16px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 20px;
                        background: linear-gradient(135deg, var(--card-color), var(--card-color-light));
                        color: white;
                        box-shadow: 0 6px 20px rgba(var(--card-color-rgb), 0.3);
                        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
                        position: relative;
                        z-index: 2;
                        
                        &::before {
                            content: '';
                            position: absolute;
                            top: -2px;
                            left: -2px;
                            right: -2px;
                            bottom: -2px;
                            background: linear-gradient(135deg, var(--card-color-light), var(--card-color));
                            border-radius: 18px;
                            z-index: -1;
                            opacity: 0;
                            transition: opacity 0.3s ease;
                        }
                        
                        .el-icon {
                            font-size: 26px;
                            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
                        }
                    }

                    .stat-content {
                        position: relative;
                        z-index: 2;
                        
                        .stat-title {
                            font-size: 15px;
                            color: var(--text-secondary);
                            margin-bottom: 12px;
                            font-weight: 600;
                            text-transform: uppercase;
                            letter-spacing: 0.5px;
                            opacity: 0.8;
                        }

                        .stat-value {
                            font-size: 32px;
                            font-weight: 800;
                            color: var(--text-primary);
                            margin-bottom: 12px;
                            line-height: 1.1;
                            transition: all 0.3s ease;
                            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                        }

                        .stat-badge {
                            font-size: 13px;
                            color: var(--card-color);
                            background: linear-gradient(135deg, rgba(var(--card-color-rgb), 0.1), rgba(var(--card-color-rgb), 0.05));
                            padding: 6px 12px;
                            border-radius: 20px;
                            display: inline-block;
                            font-weight: 600;
                            border: 1px solid rgba(var(--card-color-rgb), 0.2);
                            backdrop-filter: blur(10px);
                            transition: all 0.3s ease;
                            
                            &:hover {
                                background: rgba(var(--card-color-rgb), 0.15);
                                transform: scale(1.05);
                            }
                        }
                    }

                    // 不同类型卡片的颜色
                    &.stat-card-primary {
                        --card-color: #409eff;
                        --card-color-light: #79bbff;
                        --card-color-rgb: 64, 158, 255;
                    }

                    &.stat-card-success {
                        --card-color: #67c23a;
                        --card-color-light: #95d475;
                        --card-color-rgb: 103, 194, 58;
                    }

                    &.stat-card-warning {
                        --card-color: #e6a23c;
                        --card-color-light: #eebe77;
                        --card-color-rgb: 230, 162, 60;
                    }

                    &.stat-card-info {
                        --card-color: #909399;
                        --card-color-light: #b1b3b8;
                        --card-color-rgb: 144, 147, 153;
                    }

                    &.stat-card-danger {
                        --card-color: #f56c6c;
                        --card-color-light: #f89898;
                        --card-color-rgb: 245, 108, 108;
                    }

                    &.stat-card-secondary {
                        --card-color: #6c757d;
                        --card-color-light: #9ca3af;
                        --card-color-rgb: 108, 117, 125;
                    }

                    &.stat-card-purple {
                        --card-color: #8b5cf6;
                        --card-color-light: #a78bfa;
                        --card-color-rgb: 139, 92, 246;
                    }

                    &.stat-card-cyan {
                        --card-color: #06b6d4;
                        --card-color-light: #67e8f9;
                        --card-color-rgb: 6, 182, 212;
                    }
                }
            }
        }

        // 图表区域
        .charts-section {
            .charts-container {
                background: var(--card-bg);
                border-radius: var(--border-radius-large);
                box-shadow: var(--shadow-base);
                overflow: hidden;

                :deep(.el-card__body) {
                    padding: 0;
                }

                .charts-header {
                    padding: 24px 24px 0 24px;

                    .section-title {
                        font-size: 20px;
                        font-weight: 600;
                        color: var(--text-primary);
                        margin: 0 0 20px 0;
                        display: flex;
                        align-items: center;

                        &::before {
                            content: '';
                            width: 4px;
                            height: 20px;
                            background: linear-gradient(135deg, var(--primary-color), #79bbff);
                            border-radius: 2px;
                            margin-right: 12px;
                        }
                    }

                    .custom-tabs {
                        :deep(.el-tabs__header) {
                            margin: 0;
                            border-bottom: 1px solid var(--border-light);

                            .el-tabs__nav-wrap {
                                .el-tabs__nav {
                                    .el-tabs__item {
                                        padding: 12px 20px;
                                        font-weight: 500;
                                        color: var(--text-regular);
                                        border: none;
                                        position: relative;
                                        transition: all 0.3s ease;

                                        .tab-label {
                                            display: flex;
                                            align-items: center;

                                            .el-icon {
                                                margin-right: 6px;
                                                font-size: 16px;
                                            }
                                        }

                                        &.is-active {
                                            color: var(--primary-color);
                                            background: rgba(64, 158, 255, 0.05);

                                            &::after {
                                                content: '';
                                                position: absolute;
                                                bottom: 0;
                                                left: 50%;
                                                transform: translateX(-50%);
                                                width: 30px;
                                                height: 3px;
                                                background: var(--primary-color);
                                                border-radius: 2px;
                                            }
                                        }

                                        &:hover:not(.is-active) {
                                            color: var(--primary-color);
                                            background: rgba(64, 158, 255, 0.03);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .charts-content {
                    padding: 24px;

                    .chart-panel {
                        .chart-header {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 20px;

                            .chart-title {
                                font-size: 16px;
                                font-weight: 600;
                                color: var(--text-primary);
                                margin: 0;
                            }

                            .chart-controls {
                                :deep(.el-radio-group) {
                                    .el-radio-button {
                                        .el-radio-button__inner {
                                            border-radius: 6px;
                                            margin: 0 2px;
                                            transition: all 0.3s ease;

                                            &:hover {
                                                color: var(--primary-color);
                                                border-color: var(--primary-color);
                                            }
                                        }

                                        &.is-active {
                                            .el-radio-button__inner {
                                                background: var(--primary-color);
                                                border-color: var(--primary-color);
                                                box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .chart-container {
                            background: var(--card-bg);
                            border: 1px solid var(--border-light);
                            border-radius: var(--border-radius);
                            padding: 16px;

                            .chart-canvas {
                                width: 100%;
                                height: 400px;
                            }
                        }
                    }

                    .report-panel {
                        .report-header {
                            margin-bottom: 20px;

                            .report-title {
                                font-size: 16px;
                                font-weight: 600;
                                color: var(--text-primary);
                                margin: 0;
                            }
                        }

                        .report-content {
                            .report-table {
                                border-radius: var(--border-radius);
                                overflow: hidden;

                                :deep(.el-table) {
                                    .el-table__header {
                                        th {
                                            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
                                            color: var(--text-primary);
                                            font-weight: 600;
                                            border-bottom: 2px solid var(--border-light);
                                        }
                                    }

                                    .el-table__body {
                                        tr {
                                            transition: all 0.3s ease;

                                            &:hover {
                                                background: rgba(64, 158, 255, 0.05);
                                            }

                                            td {
                                                border-bottom: 1px solid #f5f7fa;

                                                .amount-text {
                                                    font-weight: 600;
                                                    color: var(--success-color);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

// 全局标题样式
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

h3 {
    display: inline-block;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 16px;
}

h5 {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 12px;
}

h6 {
    display: inline-block;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 8px;
}

// 响应式设计
@media (max-width: 1200px) {
    .dashboard-wrapper {
        padding: 16px;

        .dashboard-container {
            .stats-section {
                .stats-row {
                    .stat-card {
                        margin-bottom: 12px;

                        .stat-value {
                            font-size: 24px;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .dashboard-wrapper {
        padding: 12px;

        .dashboard-container {
            .search-section {
                .search-card {
                    :deep(.el-card__body) {
                        padding: 16px;
                    }
                }
            }

            .stats-section {
                .stats-row {
                    .stat-card {
                        padding: 20px;

                        .stat-icon {
                            width: 40px;
                            height: 40px;
                        }

                        .stat-value {
                            font-size: 20px;
                        }
                    }
                }
            }

            .charts-section {
                .charts-container {
                    .charts-content {
                        padding: 16px;

                        .chart-panel {
                            .chart-container {
                                .chart-canvas {
                                    height: 300px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

// 暗黑模式支持
.dark {
    :root {
        --dashboard-bg: #1a1a1a;
        --card-bg: #2d2d2d;
        --text-primary: #ffffff;
        --text-regular: #e5e5e5;
        --text-secondary: #a3a3a3;
        --border-light: #404040;
        --shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
        --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1);
    }

    .dashboard-wrapper {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);

        .search-card {
            background: rgba(45, 45, 45, 0.95) !important;
        }

        .stat-card {
            background: var(--card-bg) !important;

            &:hover {
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            }
        }

        .charts-container {
            background: var(--card-bg) !important;

            :deep(.el-tabs__header) {
                background: linear-gradient(135deg, #374151 0%, #4b5563 100%) !important;

                .el-tabs__item {
                    &.is-active {
                        background: var(--card-bg) !important;
                    }
                }
            }
        }
    }

    .ba-card-border {
        border-color: #353535;
    }

    .wellcom-div {
        background: none !important;
    }
}

// 动画效果
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.dashboard-wrapper {
    animation: fadeInUp 0.6s ease-out;

    .stat-card {
        animation: slideInRight 0.6s ease-out;

        &:nth-child(1) { animation-delay: 0.1s; }
        &:nth-child(2) { animation-delay: 0.2s; }
        &:nth-child(3) { animation-delay: 0.3s; }
        &:nth-child(4) { animation-delay: 0.4s; }
    }

    .charts-container {
        animation: fadeInUp 0.8s ease-out 0.3s both;
    }
}


</style>
